Power Apps provides
default screens that make a useful
app out of the box. However, you'll often want to customize a generated
app to suit your needs. In this video, you will explore the basic changes for
each screen on the app. You can do a lot more
than customize an app, but the best way to start
learning is to take a generated app and make
common customizations. This will allow you to
become familiar with the controls, layouts,
and functions. The Contoso Site
Tracking app already shows an image and some
text for each product, but the layout could be better. Let's take a look at how
to improve the layout. In the Power Apps
Canvas homepage, go to the Screens tab
in the tree list pane, and click the
drop-down arrow for BrowseScreen1 to open a list of the components of
the BrowseScreen. Next, select BrowseGallery1, and you'll see that a
highlight box appears around the gallery section of
the app screen preview. Now in the properties
pane on the right, click the drop-down
arrow for layout to open a menu with
various layout options. In this example, you
can select the image, title, subtitle,
and body option. Notice that the
gallery section of the app changes to
a different layout. Now, select the address of
the first item at the top of the gallery and go to the Advanced tab in
the properties pane. In the text field, change ThisItem.Address
to ThisItem.Title. You will notice that the text in this example is actually
a function that is specifying what
information should be displayed for this
element in each item. Each item will now display a title rather than an
address for each building. Let's change the
location and description elements as well to
achieve a better layout. Select the location of the
item and update the text field from ThisItem.City to
ThisItem.Description. Finally, select the description of the item at the bottom and update the text from ThisItem.Description
to ThisItem.City. Looks much better
now, don't you think? Changing the layout of a
gallery and the types of data that it shows
is that simple, and you might find
that it's fun too. Sometimes when
creating a Canvas app, you need to combine data
from multiple data sources. This will all be
determined by your needs and what you hope to accomplish
with your Canvas app. Let's have a look at adding Office 365 Outlook as an
additional data source. This is just one of the
many sources you can use to expand your
Canvas app's data. First, select the View tab and then click "Data sources"
to open the data pane. Now click "Add data" to open the selected
data source menu. Next, type Office 365
Outlook into the search bar, simply click on
Office 365 Outlook. If prompted, you may need to sign in with
your work account. The Office 365
Outlook connection has been created and
added to your app. It is now ready to be used. For more information about
the types of commands you can use with the Office
365 Outlook connector, please see the
additional resources at the end of this lesson. Next, let's look at
the details screen. Here you want to change
the order of the fields. The controls on the screen differ from the controls
on the browse screen. So the process for changing them is also slightly different. First, open the
tree list pane by selecting Tree view from
the menu on the left. In the Screens tab, click the drop-down arrow for DetailScreen1 to open the
component list for this screen. Then click DetailForm1 to view a preview of the
detail screen on the app. Notice that the form section of the screen is highlighted. In the form properties pane on the right, click "Edit fields". From the field's menu, click the "Add field"
button at the top. Here you can choose to add
any of the data source items that were not added by default
to the details screen. You will simply click the
checkbox of the items you wanted to include and
then click "Add". In the fields menu,
you can also rearrange the order of the fields
on the details screen. You can click and drag
each field in the list and place it in the
position that you want it to appear on the screen. You can also remove
fields that you don't want to display
to your users, such as the ID field
in this example. Click the More actions
button and then select "Remove" from
the option list. Now let's have a look at how
you can make it easier for users of your app to enter
information in a text box. In the Tree view pane, click the drop-down arrow for EditScreen1 in the screens tab, then select EditForm1 to view a preview of the
edit screen on the app. Notice that the form section of the screen is highlighted. In the form properties pane on the right, click Edit fields. Now in the fields menu, click the description field to expand the options
for that field. Next, click the control
type drop-down menu, and select Edit multi-line text from the available options. Changing the description
field from edit text to edit multi-line text
enables your users to add more than just a
few words into this field. You can also reorder the
fields to match the order from the details screen to give the user a more consistent
user experience. As you've seen, a few
basic steps can greatly improve the appearance and
experience of using an app, and Power App Studio provides many options for
customizing those apps. A control is UI element that produces an action or
shows information. Many controls in Power Apps are similar to controls that
you've used in other apps, labels, text input boxes, drop-down lists, navigation
elements, and so on. In addition to these
typical controls, Power Apps has more
specialized controls which you can find
on the Insert tab. A few controls that
can add interest and impact your apps
include galleries. These are layered containers
that hold a set of controls that show rows
from a data source. Forms, show details about your data and let you
create and edit records. Media, lets you add
background images, including a camera button, so that users can
take pictures from the app or even add
a barcode reader for quickly capturing identification
information, and charts. These controls that you
add charts so that users can perform instance analysis
while they're on the road. To see all the various controls that are available to you, have a look at each
option on the Insert tab.